@use "everything" as *;

.container {
  --spacing: 1em;

  margin-bottom: var(--heading-margin-bottom, 0.5em);
  margin-left: negate-var(var(--spacing));
  margin-top: 1.25em;
  padding-left: var(--spacing);
  position: relative;
  // NOTE: This was moved to the root layout.scss
  // scroll-margin-top: calc(0.5rem +  layout-get-var(header-height));

  @include mouse-hover {
    .link {
      opacity: 1;
      pointer-events: auto;
    }
  }

  &::after {
    clear: both;
    content: "";
    display: block;
  }

  @include touch-only($css-modules: true) {
    --spacing: 0;
  }
  @include rtl {
    margin-left: 0;
    margin-right: negate-var(var(--spacing));
    padding-left: 0;
    padding-right: var(--spacing);
  }
}

.link {
  color: inherit;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  text-decoration: none;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity $linear-duration;

  &:focus {
    opacity: 1;
  }

  &::after {
    content: "#";
  }

  &:hover::after {
    text-decoration: underline;
  }

  @include rtl {
    left: auto;
    right: 0;
  }
}
